jQuery(function() {
	//Sort able
//	jQuery( ".nino-grid-col.nino-sortable" ).sortable({placeholder: "ui-state-highlight", connectWith: ".nino-grid-col.nino-sortable"});
//	jQuery( ".nino-grid-col.nino-sortable" ).disableSelection();
	
	//Draggable Grid System
	jQuery( "#grid-system .nino-elementDragAble" ).draggable({ 
		connectToSortable: "#form-builder-area .nino-grid-col", 
		scroll: false,
		containment: "#nino-mainSettings",
		helper: "clone"
	});
	
	//Draggable Elements
	jQuery("#popular-elements .nino-elementDragAble").draggable({ 
		connectToSortable: "#form-builder-area .nino-grid-col", 
		scroll: false,
		containment: "#nino-mainSettings",
		helper: "clone"
	});
	
	//Set sortable Grid System
	droppableGrid();
});


//Enable droppable grid
droppableGrid = function () {
	jQuery("#form-builder-area .nino-grid-col")
	.droppable({
		drop: function (event, ui) {
			createFormElement(ui.draggable);
		},
		over: function (event, ui){
			jQuery(ui.draggable).addClass("nino-showElement");
		},
		out: function () {
			//jQuery(this.removeClass("nino-showElement"));
		},
		helper: "clone"
	})
	.sortable({
		placeholder: "ui-state-highlight",
		connectWith: "#form-builder-area .nino-grid-col"
	}).disableSelection();
};

createFormElement = function (obj) {
	droppableGrid();
};